<template>
    <el-select :style="defaultStyle" :disabled="disabled" v-model="value" placeholder="请选择物流公司" @change="onChange">
      <el-option v-for="(item,index) in list" :key="index" :value="item.logisticsCompanyCode" :label="item.logisticsCompanyName"></el-option>
    </el-select>
</template>
<script>
import logistics from '@/api/system/logisticsAPI'
export default {
  model: {
    prop: 'code',
    event: 'select'
  },
  props: {
    disabled: {type: Boolean, default: false},
    code: String,
    name: String,
    defaultStyle: {type: Object,
      default: () => {
        return {width: '280px'}
      }
    }
  },
  watch: {
    code: {
      handler (val) {
        this.value = val
      },
      immediate: true
    }
  },
  components: {},
  mounted () {
    this.getLogisticsCompanyList()
  },
  data () {
    return {
      value: null,
      list: []
    }
  },
  beforeDestroy () {
    this.$emit('st', null)
    this.$emit('name:update', null)
  },
  methods: {
    onChange (val) {
      this.$emit('select', val)
      const logisticsCompanyInfo = this.list.find(item => {
        return item.logisticsCompanyCode === val
      })
      this.$emit('update:name', logisticsCompanyInfo.logisticsCompanyName || null)
      this.$emit('change', val)
    },
    getLogisticsCompanyList () {
      logistics.getLogisticsCompanyListAPI({isPage: false}).then(res => {
        this.list = res.data !== null ? res.data.list : []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
